create-emotion

create-emotion

Create distinct instances of emotion.

The main emotion package can be thought of as a call to createEmotion with sensible defaults for most applications.

import createEmotion from 'create-emotion'

export const {
  flush,
  hydrate,
  cx,
  merge,
  getRegisteredStyles,
  injectGlobal,
  keyframes,
  css,
  sheet,
  cache
} = createEmotion()

Upside

• Calling it directly will allow for some low level customization.

• Create custom names for emotion APIs to help with migration from other, similar libraries.

• Could set custom key to something other than css

Downside

• Introduces some amount of complexity to your application that can vary depending on developer experience.

• Required to keep up with changes in the repo and API at a lower level than if using emotion directly

Primary use cases

• Using emotion in embedded contexts such as an <iframe/>

• Setting a nonce on any <style/> tag emotion creates for security purposes

• Use emotion with a developer defined <style/> tag

• Using emotion with custom stylis plugins

Multiple instances in a single app example

import createEmotion from 'create-emotion'

export const {
  flush,
  hydrate,
  cx,
  merge,
  getRegisteredStyles,
  injectGlobal,
  keyframes,
  css,
  sheet,
  cache
} = createEmotion({
  // The key option is required when there will be multiple instances in a single app
  key: 'some-key'
})

Options

createEmotion accepts the same options as createCache from @emotion/cache.